<template>
	<view style="width: 100%; height: 100%; background-color: #f7f7f7; ">

		<view>


			<view style="">
				<view
					style="color: #000000; font-size: 18px; padding-top:20px; width: 100%; text-align: center;margin-bottom: 20px;">
					请输入提货信息</view>
			</view>
			<view
				style="background-color: #FFFFFF;width: 370px; padding: 10px 0 10px 0; border-radius: 10px; margin: 0 auto; display: flex;justify-content: center;flex-direction: column;">

				<view style="padding-right: 20px;">



					<view style="margin-top: 10px;   display: flex;justify-content: space-around;">
						<text
							style="width: 80px;text-align: right;   display: flex;justify-content: center;flex-direction: column;">收货人:</text>
						<input
							style="text-align: center; width: 70%; height: 35px; border: 1px solid #dfe2e5; border-radius: 5px; password"
							v-model="listadd.name"></input>
					</view>


					<view style="margin-top: 10px;  display: flex;justify-content: space-around;">
						<text
							style="width: 80px; text-align: right;  display: flex;justify-content: center;flex-direction: column;">省-市-区:</text>
						<view
							style="display: flex;justify-content: space-around; text-align: center;width: 70%; height: 35px; border: 1px solid #dfe2e5; border-radius: 5px; password"
							v-model="duihuan">

							<view style="display: flex;justify-content: center; flex-direction: column;">
								<view class="wrap"
									style="display: flex;justify-content: center; flex-direction: column;" type="text">

									<picker style="display: flex;justify-content: center; flex-direction: column;"
										class="pickerList" mode="multiSelector" :range="newProvinceDataList"
										:value="multiIndex" @change="pickerChange" @columnchange="pickerColumnchange">
										<view class="le"
											style="display: flex;justify-content: center; flex-direction: column;">
											{{patientBasic.cityName}}
										</view>
									</picker>
								</view>
							</view>



						</view>
					</view>


					<view style="margin-top: 10px;  display: flex;justify-content: space-around;">
						<text
							style="width: 80px; text-align: right;  display: flex;justify-content: center;flex-direction: column;">详细地址:</text>
						<input
							style="text-align: center;width: 70%; height: 35px; border: 1px solid #dfe2e5; border-radius: 5px; password"
							v-model="listadd.address"></input>
					</view>

					<view style="margin-top: 10px;  display: flex;justify-content: space-around;">
						<text
							style="width: 80px; text-align: right;  display: flex;justify-content: center;flex-direction: column;">手机号码:</text>
						<input
							style="text-align: center;width: 70%; height: 35px; border: 1px solid #dfe2e5; border-radius: 5px; password"
							v-model="listadd.phone"></input>
					</view>



				</view>
				<view style="width:86%; margin: 0 auto; padding-top: 50px;">
					<u-button color='linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))'
						style=" font-size: 15px;" @click="onclordui()">提 货</u-button>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import provinceData from './provinceData.js' //引入的地址地区
	export default {

		data() {
			return {
				duihuan: '',
				tips: '',
				value: '',
				listadd: {
					code: '', //卡号
					name: '', //用户名
					address: '', //地址
					phone: '', // 电话号码
					province: '', //省
					city: '', //市
					area: '' //县
				},


				yanzhengs: {

				},

				// shenshows: false,
				// shishows: false,
				// xianshows: false,
				oldpProvinceDataList: provinceData,
				newProvinceDataList: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				patientBasic: {
					// 地区
					cityName: '点击选择省/市/区', //当前点击的地址
				}

			}
		},

		onLoad(option) {
			this.listadd.code = option.code
			for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
				this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].city.length; i++) {
				this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].city[i].name);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].city[0].area.length; i++) {
				this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].city[0].area[i]);
			}
		},

		methods: {

			yanzheng() {
				// if (this.$refs.uCode.canGetCode) {
				// 	// 模拟向后端请求验证码
				// 	uni.showLoading({
				// 		title: '正在获取验证码'
				// 	})
				// 	setTimeout(() => {
				// 		uni.hideLoading();
				// 		// 这里此提示会被this.start()方法中的提示覆盖
				// 		uni.$u.toast('验证码已发送');
				// 		// 通知验证码组件内部开始倒计时
				// 		this.$refs.uCode.start();
				// 	}, 2000);
				// } else {
				// 	uni.$u.toast('倒计时结束后再发送');
				// }
				// this.yanzhengs.phone = this.listadd.tel
				// this.$http.postsend(this.yanzhengs).then(res => {
				// })
			},



			pickerChange(e) {
				this.multiIndex = e.detail.value;
				this.patientBasic.cityName =
					`${this.newProvinceDataList[0][this.multiIndex[0]]}/${this.newProvinceDataList[1][this.multiIndex[1]]}/${this.newProvinceDataList[2][this.multiIndex[2]]}`


				this.listadd.province = this.newProvinceDataList[0][this.multiIndex[0]]
				this.listadd.city = this.newProvinceDataList[1][this.multiIndex[1]]
				this.listadd.area = this.newProvinceDataList[2][this.multiIndex[2]]

			},
			pickerColumnchange(e) {

				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].city.map((item, index) => {
						return item.name
					})
					if (this.oldpProvinceDataList[this.multiIndex[0]].city.length === 1) {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[0].area.map((item,
							index) => {
							return item
						})
					} else {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[
							1]].area.map((item, index) => {
							return item
						})
					}
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]]
						.area.map((item, index) => {
							return item
						})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
				}
			},


			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.shows = false
			},
			cancel() {
				this.shows = false
			},



			// confirm() {
			// 	this.show = false
			// },

			// close() {
			// 	this.show = false
			// },


			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {},

			showe() {
				this.shows = true
			},
			// shishow() {
			// 	this.shishows = true
			// },
			// xianshow() {
			// 	this.xianshows = true
			// },

			onclordui() {

				// code: this.duihuan, //卡号
				// password: '', //密码
				// username: '', //用户名
				// address: '', //地址
				// tel: '', // 电话号码
				// province: '', //省
				// city: '', //市
				// area: '' //县


				if (this.listadd.code == '') {
					uni.$u.toast("请填写提货号");
				} else if (this.listadd.password == '') {
					uni.$u.toast("请填写密码");
				} else if (this.listadd.username == '') {
					uni.$u.toast("请填写收货人");
				} else if (this.listadd.tel == '') {
					uni.$u.toast("请填写电话号");
				} else if (this.listadd.address == '') {
					uni.$u.toast("请填写详情地址");
				} else if (this.listadd.province == '') {
					uni.$u.toast("请选择省-市-区");
				} else {
					this.yanzhengs.code = this.listadd.code
					this.yanzhengs.phone = this.listadd.phone
					this.$http.postewmlog(this.listadd).then(res => {

						if (res.code == 1) {
							uni.showLoading({
								title: '正在提货',
							})
							setTimeout(() => {
								uni.$u.toast(res.info);
							}, 500)
						} else {
							uni.$u.toast(res.info);
							
						}

					})

				}





			},

			scan() {
				// #ifndef H5
				var this_ = this
				uni.scanCode({
					success: function(res) {

						this_.duihuan = res.result
					}
				});
				// #endif
				// #ifdef H5
				this.$tip.alert("暂不支持")
				// #endif
			},

			todunhuan() {
				uni.navigateTo({
					url: '../duihuanjilu/duihuanjilu'
				})
			}


		}
	}
</script>

<style>
	@font-face {
		font-family: 'iconfont';
		/* Project id 3367375 */
		src: url('//at.alicdn.com/t/font_3367375_jgaj2nxxkk.woff2?t=1653035757996') format('woff2'),
			url('//at.alicdn.com/t/font_3367375_jgaj2nxxkk.woff?t=1653035757996') format('woff'),
			url('//at.alicdn.com/t/font_3367375_jgaj2nxxkk.ttf?t=1653035757996') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}
</style>
